<template>
  <div class="wx-coontainer fl">
    <div class="tootolbar">
      <div class="top">
        <div class="logo">
          <img src="../../assets/images/logo.jpg" alt="" />
        </div>
        <div class="item-menu">
          <div class="item">
            <el-icon color="#fff" size="22px"><ChatRound /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><User /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><Coin /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><FolderRemove /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#07C160" size="22px"><HelpFilled /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><MagicStick /></el-icon>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="item-menu">
          <div class="item">
            <el-icon color="#fff" size="22px"><PictureRounded /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><Iphone /></el-icon>
          </div>
          <div class="item">
            <el-icon color="#fff" size="22px"><Operation /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="names">
      <div class="top">
        <el-input
          class="input"
          v-model="input1"
          style="width: 240px"
          size="large"
          placeholder="搜索"
          prefix-icon="Search"
        />
        <div class="but">+</div>
      </div>
      <div class="bottom">
        <div class="item" v-for="item in 16">
          <div class="left">
            <img src="../../assets/images/logo.jpg" alt="" />
          </div>
          <div class="right">
            <div class="name-top fl">
              <div class="name">Conistudy</div>
              <div class="time">10:20</div>
            </div>
            <div class="content">你好，在吗？</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="top">
        <div class="title">web编程 6群 (微前端，vue)</div>
        <div>...</div>
      </div>
      <div class="content-text">
        <div class="left">
          <div class="item">
            <div class="left">
              <img src="../../assets/images/logo.jpg" alt="" />
            </div>
            <div class="right-name">
              <div class="name-top">
                <div class="name">Conistudy</div>
              </div>
              <div class="content">你好，在吗？ 中午想吃啥 ?</div>
            </div>
          </div>
          <div class="item"></div>
        </div>
        <div class="right">
          <div class="item">
            <div class="right-name">
              <div class="name-top">
                <div class="name">Conistudy</div>
              </div>
              <div class="content">哼,不知道!</div>
            </div>
            <div class="left">
              <img src="../../assets/images/logo.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-top">
          <div class="left">
            <div class="top-icon">
              <el-icon><PictureRounded /></el-icon>
            </div>
            <div class="top-icon">
              <el-icon><FolderOpened /></el-icon>
            </div>
            <div class="top-icon">
              <el-icon><Scissor /></el-icon>
            </div>
            <div class="top-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
          </div>
          <div class="right">
            <div class="top-icon">
              <el-icon><Microphone /></el-icon>
            </div>
            <div class="top-icon">
              <el-icon><VideoCameraFilled /></el-icon>
            </div>
          </div>
        </div>

        <!-- <div class="input"></div>
        <div class="but">发送</div> -->
        <div class="buttom-send">
          <div class="btn">发送(S)</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const list = ref([{}])
const input1 = ref('')
</script>

<style lang="scss" scoped>
.wx-coontainer {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  .tootolbar {
    width: 7%;
    padding-top: 10px;
    background-color: #36373a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      display: flex;
      flex-direction: column;

      .logo {
        width: 35px;
        height: 35px;
        margin: 20px auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        .item {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      .item-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        .item {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
        }
      }
    }
  }
  .names {
    width: 30%;
    padding-top: 10px;
    // background-color: pink;
    border-right: 1px solid #ccc;
    .top {
      display: flex;
      height: 50px;
      background-color: rgb(247, 247, 247);
      .input {
        width: 80%;
        height: 25px;
        margin: 10px 20px;
        border-radius: 5px;
      }
      .but {
        width: 30px;
        height: 20px;
        line-height: 25px;
        background-color: #eee;
        text-align: center;
        color: #868181;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        margin-right: 10px;
      }
    }
    .bottom {
      width: 100;
      height: calc(100vh - 65px);
      overflow: auto;

      .item {
        display: flex;
        height: 60px;
        background-color: rgb(229, 229, 229);
        // margin-bottom: ;
        .left {
          width: 50px;
          margin: 10px;

          img {
            width: 40px;
          }
        }
        .right {
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 10px 10px 10px 0;
          box-sizing: border-box;

          .name-top {
            justify-content: space-between;
            .name {
              font-size: 15px;
              font-weight: 500;
            }
            .time {
              font-size: 12px;
              color: #868181;
            }
          }
          .content {
            font-size: 12px;
            color: #868181;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .main {
    display: flex;
    flex: 1;
    // background-color: pink;
    padding-top: 15px;
    border-bottom: 1px solid #ccc;
    flex-direction: column;
    .top {
      width: 100%;
      height: 50px;
      background-color: rgb(247, 247, 247);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .content-text {
      width: 100%;
      height: calc(100vh - 250px);
      background-color: #f5f5f5;
      border-bottom: 1px solid #eee;
      overflow-y: scroll;
      direction: ltr;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .left {
        width: 47%;
        flex-direction: column;
        justify-content: flex-end;
        .item {
          width: 100%;
          min-height: 50px;
          // background-color: rgb(182, 196, 151);
          display: flex;
          margin-bottom: 10px;
          .left {
            width: 50px;
            margin: 10px;
            img {
              width: 100%;
              height: 50px;
            }
          }
          .right-name {
            background-color: white; /* 气泡背景颜色 */
            border-radius: 10px; /* 边角圆滑度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 10px; /* 下边距 */
            max-width: 60%; /* 最大宽度 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            position: relative; /* 定位小三角 */
            word-wrap: break-word; /* 长单词或URL自动换行 */
            .name-top {
              display: flex;
              justify-content: space-between;
              .name {
                font-size: 12px;
                font-weight: 500;
              }
              .time {
                font-size: 15px;
                color: #868181;
              }
            }
            .content {
              font-size: 12px;
              color: #868181;
              margin-top: 5px;
            }
          }
          .right-name:before {
            content: ''; /* 三角不需要内容 */
            position: absolute; /* 绝对定位 */
            top: 25px; /* 三角底部距离气泡底部 */
            left: -20px; /* 三角左侧距离气泡左侧 */
            border-left: 10px solid transparent; /* 左侧透明边框 */
            border-right: 10px solid #f8f6f6; /* 右侧透明边框 */
            border-top: 10px solid transparent; /* 顶部白色边框形成小三角 */
          }
        }
      }
      .right {
        width: 47%;
        flex-direction: column;
        justify-content: flex-end;
        .item {
          width: 100%;
          min-height: 50px;
          display: flex;
          margin-bottom: 10px;
          width: 100%;
          min-height: 50px;
          // background-color: rgb(182, 196, 151);
          display: flex;
          margin-bottom: 10px;
          align-items: flex-end;
          justify-content: flex-end;
          .left {
            width: 50px;
            margin: 10px;
            img {
              width: 100%;
              height: 50px;
            }
          }
          .right-name {
            background-color: #4fd443; /* 气泡背景颜色 */
            border-radius: 10px; /* 边角圆滑度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 10px; /* 下边距 */
            max-width: 60%; /* 最大宽度 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            position: relative; /* 定位小三角 */
            word-wrap: break-word; /* 长单词或URL自动换行 */
            .name-top {
              display: flex;
              justify-content: space-between;
              .name {
                font-size: 12px;
                font-weight: 500;
              }
              .time {
                font-size: 15px;
                color: #868181;
              }
            }
            .content {
              font-size: 12px;
              color: #333;
              margin-top: 5px;
            }
          }
          .right-name:before {
            content: ''; /* 三角不需要内容 */
            position: absolute; /* 绝对定位 */
            top: 25px; /* 三角底部距离气泡底部 */
            right: -20px; /* 三角左侧距离气泡左侧 */
            border-left: 10px solid #4fd443; /* 左侧透明边框 */
            border-right: 10px solid transparent; /* 右侧透明边框 */
            border-top: 10px solid transparent; /* 顶部白色边框形成小三角 */
            border-radius: 3px 3px 0px 0px;
          }
        }
      }
    }
    .bottom {
      width: 100%;
      height: 190px;
      background-color: rgb(247, 247, 247);
      display: flex;
      // align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      // padding: 0 10px;
      box-sizing: border-box;
      .bottom-top {
        width: 100%;
        height: 35px;
        background-color: rgb(247, 247, 247);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
        .left {
          display: flex;
          cursor: pointer;

          .top-icon {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #868181;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
          }
        }
        .right {
          display: flex;
          cursor: pointer;
          .top-icon {
            width: 30px;
            height: 30px;
            line-height: 30px;
            // background-color: #eee;
            text-align: center;
            color: #868181;
            display: flex;
            align-items: center;
            justify-content: center;
            // margin-top: 12px;
            margin-right: 10px;
          }
        }
      }
      .buttom-send {
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        padding-right: 20px;
        padding-bottom: 10px;
        .btn {
          width: 100px;
          height: 34px;
          padding: 7px;
          text-align: center;
          font-size: 15px;
          background-color: #eeeeee;
          color: rgb(39, 195, 115);
          cursor: pointer;
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

/* 定义滚动条的背景 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 定义滑块的背景 */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* 定义滑块悬停时的背景 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
